<template>
  <div v-if="Object.keys(commentInfo).length!==0" id="detail-comment">
    <div class="comment-title">
      <span class="comment-name">用户评价</span>
      <span class="comment-more">更多</span>
    </div>
    <div class="comment-info">
      <div class="u-info">
        <img :src="commentInfo.user.avatar">
        <span>{{commentInfo.user.uname}}</span>
      </div>
      <div class="comment-content">
        <div class="content">{{commentInfo.content}}</div>
        <p class="content-info">
            {{commentInfo.created | dataShow}} {{commentInfo.style}}
        </p>
      </div>
    </div>
    <div class="shop-reply" v-if="commentInfo.explain != null">
      {{commentInfo.explain}}
    </div>
    <div class="comment-img" v-if="commentInfo.images != null">
      <img :src='img' v-for="img in commentInfo.images">
    </div>
  </div>
</template>

<script>
import {formatDate} from "common/utils.js";
  export default {
    name: "DetailCommentInfo",
    props:{
      commentInfo:{
        type:Object
      }
    },
    filters:{
      dataShow(value){
        let date = new Date(value * 1000);
        return formatDate(date, "yyyy-MM-dd");
      }
    },
  }
</script>

<style scoped>
  #detail-comment {
    font-size: 14px;
    padding: 0.42rem 0.34rem;
  }
  .comment-title {
    padding: 5px 0 10px 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.3);
    position: relative;
  }
  .comment-more{
    position: absolute;
    padding-top: 5px;
    right: 20px;
    top: 0px;
  }
  .u-info {
    padding: 0.42rem 0;
    line-height: 1.8rem;
    display: flex;
  }
  .u-info img{
    width:  1.8rem;
    height: 1.8rem;
    margin-right: 15px;
  }
  .content {
    line-height: 1rem;
  }
  .content-info {
    color: #999;
    padding: 0.3rem 0;
  }
  .shop-reply {
    border-top: 0.04rem solid rgba(128,128,128,0.4);
  }
  .comment-img img {
    margin-right: 0.12rem;
    width: auto;
    height: 23.26rem;
  }
</style>
